<template>
  <div class="">
    <el-card>
      <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon :closable="false">
      </el-alert>
      <el-form ref="form" label-width="120px">
        <el-form-item class="t-left mt" label="选择商品分类：">
          <!-- select框 -->
          <el-cascader v-model="selectParams" :options="ParamsList" :props="cascaderProps" @change="handleChange">
          </el-cascader>
        </el-form-item>

        <!-- tab栏 -->
        <el-tabs v-model="activeName" :data="onlyList" @tab-click="handleClick" border>
          <div class="t-left">
            <el-button @click="addCateDialog">{{addBtnVal}}</el-button>
          </div>
          <el-tab-pane label="动态参数" name="many">
            <!-- 动态参数表格 -->
            <el-table :ref="manyFef" :data="onlyList" style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-tag closable v-for="(item,index) in props.row.attr_vals" :key="index"
                    @close="manyhandleClose(props.row,index)"> {{ item}}</el-tag>
                  <!-- 可新增的tag标签 -->
                  <el-input class="input-new-tag wight100" v-if=" props.row.inputVisible"
                    v-model=" props.row.inputValue" ref="manyTagInput" size="small"
                    @keyup.enter.native="$event.target.blur" @blur="manyhandleInputConfirm(props.row)">
                  </el-input>
                  <el-button v-else class="button-new-tag" size="small" @click="manyshowInput(props.row)">+ New Tag
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column label="属性名称" prop="attr_name">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button class="el-icon-edit" type="primary" size="small"
                    @click="editonlyList(scope.row.attr_id,scope.row.cat_id)">
                    编辑
                  </el-button>
                  <el-button class="el-icon-delete" type="danger" size="small"
                    @click="deleteonlyList(scope.row.attr_id,scope.row.cat_id)">删除</el-button>
                </template>
              </el-table-column>

            </el-table>
          </el-tab-pane>
          <!-- 静态属性表格 -->
          <el-tab-pane label="静态属性" name="only">
            <el-table :ref="manyFef" :data="onlyList" style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="props">

                  <el-tag :key="index" v-for="(item,index) in props.row.attr_vals" closable :disable-transitions="false"
                    @close="onlyhandleClose(props.row,index)">
                    {{item}}
                  </el-tag>
                  <!-- 可新增的tag标签 -->
                  <el-input class="input-new-tag wight100" v-if=" props.row.inputVisible"
                    v-model=" props.row.inputValue" ref="onlyTagInput" size="small"
                    @keyup.enter.native="onlyhandleInputConfirm(props.row)" @blur="onlyhandleInputConfirm(props.row)">
                  </el-input>
                  <el-button v-else class="button-new-tag" size="small" @click="onlyshowInput(props.row)">+ New Tag
                  </el-button>

                </template>
              </el-table-column>
              <el-table-column label="静态属性" prop="attr_name">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button class="el-icon-edit" type="primary" size="small"
                    @click="editonlyList(scope.row.attr_id,scope.row.cat_id)">编辑
                  </el-button>
                  <el-button class="el-icon-delete" type="danger" size="small"
                    @click="deleteonlyList(scope.row.attr_id,scope.row.cat_id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>

      </el-form>
      <!-- 添加框 -->
      <el-dialog :title="addBtnVal" :visible.sync="addCatedialogVisible" width="30%">

        <el-form :model="addcategories" ref="addcategories" label-width="100px" class="demo-ruleForm">
          <el-form-item label="参数名称" prop="name">
            <el-input v-model="addcategories.attr_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addCatedialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="subAddCate">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑提交参数框 -->
      <el-dialog title="添加" :visible.sync="editCatedialogVisible" width="30%">
        <el-form :model="editcategories" ref="editcategories" label-width="100px" class="demo-ruleForm">
          <el-form-item label="参数名称" prop="name">
            <el-input v-model="editcategories.attr_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editCatedialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="subEditCate">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        // 选项数据源
        ParamsList: [],
        // 选中的绑定项
        selectParams: [1, 4, 23],

        // 配置项
        cascaderProps: {
          // 定义选择传到绑定数组里的字段
          value: 'cat_id',
          // 定义显示字段
          label: 'cat_name',
          // 定义联级
          children: 'children',
          // 定义点击还是hover
          expandTrigger: 'hover',
          checkStrictly: true,
        },
        // 添加按钮
        addBtnVal: '添加动态参数',
        // tab栏
        activeName: 'many',
        // 动态参数数据
        onlyList: [],
        // 动态数据ref
        manyFef: '',
        //添加参数或属性
        addcategories: {
          id: '',
          attr_name: '',
          attr_sel: this.activeName,
          attr_vals: ''
        },
        //添加弹窗参数
        addCatedialogVisible: false,
        // 编辑弹窗参数
        editCatedialogVisible: false,
        // 分类 ID
        id: '',
        // 属性id
        attrid: '',
        // 编辑提交属性
        editcategories: {
          attr_name: '',
          attr_sel: '',
          attr_vals: ''
        },

      }

    },
    created() {
      this.getParamsList()
    },
    mounted() {},
    watch: {
      activeName(newvalue, oldval) {
        if (newvalue == 'many') {
          this.addBtnVal = "添加动态参数"
          console.log(this.addBtnVal);
        } else {
          this.addBtnVal = "添加静态属性"
          console.log(this.addBtnVal);
        }
      },
    },
    computed: {
      //   获取cateid
      cateid() {
        if (this.selectParams.length != 3) {
          return
        }
        return this.selectParams[this.selectParams.length - 1]
      },
    },
    methods: {
      getParamsList() {
        this.$axios.get('categories').then(val => {
          this.ParamsList = val.data
        })
      },

      //   获取参数列表
      getcategoriesList() {
        this.$axios.get('categories/' + this.cateid + '/attributes', {
          params: {
            sel: this.activeName
          }
        }).then(val => {
          if (val.meta.status != 200) {
            return this.$message.error('请选择分类！')
          }
          this.$message.success(val.meta.msg)

          //   将得到的数据中的attr_vals的值从字符串用，拆分
          val.data.forEach(element => {
            // 去掉两边空格
            element.attr_vals = element.attr_vals.trim()
            // 给每个参数数据单独绑定显示状态和值
            element.inputVisible = false
            element.inputValue = ''
            element.attr_vals = element.attr_vals.split(',')
            console.log(element.attr_vals);
          });

          this.onlyList = val.data


        })
      },
      //   下拉框选择事件
      handleChange() {
        this.getcategoriesList()
      },
      //   分页
      handleClick(tab, event) {
        this.getcategoriesList()

      },
      // 
      manyhandleClose(tag) {

      },
      // 提交添加
      subAddCate() {

        this.$axios.post('categories/' + this.cateid + '/attributes', {
          attr_name: this.addcategories.attr_name,
          attr_sel: this.activeName
        }).then(val => {
          console.log(val);
          if (val.meta.status != 201) {
            return this.$message.error(val.meta.msg)
          }
          this.$message.success(val.meta.msg)
          this.handleClick()
          this.addCatedialogVisible = false
          this.addcategories.attr_name = ''
        })

      },
      //   添加按钮
      addCateDialog() {
        this.addCatedialogVisible = true
      },
      // 点击编辑静态属性按钮
      editonlyList(attrId, catId) {
        this.editCatedialogVisible = true
        this.id = catId
        this.attr_id = attrId
        this.editcategories.attr_sel = this.activeName

      },
      // 提交编辑静态属性按钮
      subEditCate() {
        this.$axios.put('categories/' + this.id + '/attributes/' + this.attr_id, this.editcategories).then(val => {
          if (val.meta.status != 200) {
            return this.$message.error(val.meta.msg)
          }
          this.$message.success(val.meta.msg)
          this.handleClick()
          this.editCatedialogVisible = false
          this.editcategories.attr_name = ''
        })
      },
      // 删除静态属性
      deleteonlyList(attrId, catId) {
        this.$axios.delete('categories/' + catId + '/attributes/' + attrId).then(val => {
          if (val.meta.status != 200) {
            return this.$message.error(val.meta.msg)
          }
          this.$message.success(val.meta.msg)
          this.handleClick()
        })
      },
      //onlytag添加点击时   
      onlyshowInput(row) {

        row.inputVisible = true
        this.$nextTick(_ => {
          this.$refs.onlyTagInput.$refs.input.focus();
        });
      },
      //   onlytag添加失焦和点击enter
      onlyhandleInputConfirm(row) {

        console.log(row.inputValue);
        row.attr_vals.push(row.inputValue)
        row.attr_vals = row.attr_vals.join(',')
        console.log(row.attr_vals);
        this.$axios.put('categories/' + row.cat_id + '/attributes/' + row.attr_id, {
          attr_name: row.attr_name,
          attr_sel: this.activeName,
          attr_vals: row.attr_vals
        }).then(val => {

          if (val.meta.status != 200) {
            return this.$message.error(val.meta.msg)
          }
          this.$message.success(val.meta.msg)
          row.inputValue = ''
          row.inputVisible = false;
          this.getcategoriesList()
        })
      },
      // 静态删除onlytag
      onlyhandleClose(row, index) {
        row.attr_vals.splice(index, 1)
        row.attr_vals = row.attr_vals.join(',')
        this.$axios.put('categories/' + row.cat_id + '/attributes/' + row.attr_id, {
          attr_name: row.attr_name,
          attr_sel: this.activeName,
          attr_vals: row.attr_vals
        }).then(val => {
          if (val.meta.status != 200) {
            return this.$message.error(val.meta.msg)
          }
          this.$message.success(val.meta.msg)
          this.getcategoriesList()
        })
      },
      // 点击动态新增tag按钮
      manyshowInput(row) {
        row.inputVisible = true
        this.$nextTick(_ => {
          this.$refs.manyTagInput.$refs.input.focus();
        });
      },
      // 动态新增失焦和enter
      manyhandleInputConfirm(row) {
        row.attr_vals.push(row.inputValue)
        row.attr_vals = row.attr_vals.join(',')
        this.$axios.put('categories/' + row.cat_id + '/attributes/' + row.attr_id, {
          attr_name: row.attr_name,
          attr_sel: this.activeName,
          attr_vals: row.attr_vals
        }).then(val => {

          if (val.meta.status != 200) {
            return this.$message.error(val.meta.msg)
          }
          this.$message.success(val.meta.msg)
          row.inputValue = ''
          row.inputVisible = false;
          this.getcategoriesList()
        })
      },
      // 动态删除tag
      manyhandleClose(row, index) {
        row.attr_vals.splice(index, 1)
        row.attr_vals = row.attr_vals.join(',')
        this.$axios.put('categories/' + row.cat_id + '/attributes/' + row.attr_id, {
          attr_name: row.attr_name,
          attr_sel: this.activeName,
          attr_vals: row.attr_vals
        }).then(val => {
          if (val.meta.status != 200) {
            return this.$message.error(val.meta.msg)
          }
          this.$message.success(val.meta.msg)
          this.getcategoriesList()
        })
      },
    },
  }

</script>
<style lang="css" scoped>
  .t-left {
    text-align: left;
  }

  .mt {
    margin-top: 15px;
  }

  .el-tag {
    margin: 5px;
  }

  .wight100 {
    width: 100px;
  }

</style>
